<template>
	<view class="ana-ad">	
		<!-- 销售分析 -->
		<view class="c-bd">
			<view class="selects flex">
				<view class="tit">时间</view>
				<view class="content flex">
					<view class="st-time" :class="[beginDate ?'':'placeholder']" @tap="toggleTab('range')">{{beginDate?beginDate:'开始时间'}}</view>
					<view>至</view>
					<view class="ed-time" :class="[endDate ?'':'placeholder']" @tap="toggleTab('range')">{{endDate?endDate:'结束时间'}}</view>
				</view>
			</view>
			<view>
				<canvas v-show="!radarImg" canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
				<image v-if="radarImg" :src="radarImg" class="radarImg"></image>
			</view>
			<view class="total">消费总额：{{salesTotal}}</view>
		</view>
		<!-- 区间时间选择 -->
		<w-picker
			mode="range" 
			startDate="1997" 
			endYear="2030"
			:defaultVal="rangeDval"
			:current="false"
			@confirm="onConfirm"
			 @cancel = "onCancel"
			ref="range" 
			themeColor="#f00"
		></w-picker>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import uCharts from '@/components/u-charts/u-charts.js'
	import Request from '@/request/request.js'
	import dayjs from '@/common/dayjs.min.js'
	let _self;
	let canvaColumn=null;//销售分析图表
	export default{
		components: {
			wPicker
		},
		data() {
			return {
				// rangeDval:['2020-2-01','2020-02-07'],
				rangeDval:[dayjs().subtract(1, 'year').format('YYYY-MM-DD'),dayjs().format('YYYY-MM-DD')],
				beginDate:'',//销售分析开始时间
				endDate:'',//销售分析结束时间
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				salesDatas:[],
				radarImg:'',//解决小程序canvas层级过高问题
				customerId:this.$store.state.customerInfo.id
			}
		},
		created() {
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(600);
			console.log(this.$store.state.customerInfo.id)
			this.getSales()//获取销售数据
		},
		methods:{
			toggleTab(str){
				// #ifdef MP-WEIXIN
				this.handleCanvarToImg(this.$refs[str].show)
				// #endif
				// #ifndef MP-WEIXIN
				this.$refs[str].show();
				// #endif
			},
			onConfirm(val){
				// #ifdef MP-WEIXIN
				this.radarImg = ''
				// #endif
				this.beginDate = val.from
				this.endDate = val.to
				this.getSales()
				
			},
			onCancel(){
				// #ifdef MP-WEIXIN
				this.radarImg = ''
				// #endif
			},
			handleCanvarToImg(callback){	
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: _self.cWidth,
					height: _self.cHeight,
					canvasId: 'canvasColumn',
					success:function(res) {
						_self.radarImg = res.tempFilePath
						callback&&callback()
					},
					fail:function(err){
						console.log(err)
					}
				},this)
			},
			getSales(){
				Request({
					url: 'rq/costNumRq',
					data:{
						beginDate:this.beginDate,
						endDate:this.endDate,
						customerId:this.customerId
					}
				}).then(res => {
					// _self.fillData(res.data);
					this.salesDatas = res.data&&res.data.salesMoneylist || [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
					let Column={categories:[],series:[]};
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					Column.categories=res.data&&res.data.gnames || ["鲜活豌豆苗","小盘豌豆苗","小白灵菇伴","鲍鱼菇菇伴","黄金菇菇伴","美人伞菇伴","杏鲍菇菇伴","蚝王菇菇伴","松香菇菇伴","小豆苗盒","大豆苗盒","剪刀","一次性手套","喷壶","菌菇盒","海带苗"];
					let name = this.$store.state.cusType == 2?'销售金额':'消费金额'
					Column.series= [
						{name:name,data:res.data&&res.data.salesMoneylist || []},
						{name:'采购数量',data:res.data&&res.data.salesNumlist || [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}
					];
					_self.showColumn("canvasColumn",Column);
				})
			},
			showColumn(canvasId,chartData){
				canvaColumn=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					fontSize:11,
					padding:[5,15,15,15],
					legend:{
						show:true,
						position:'top',
						float:'center',
						itemGap:30,
						padding:5,
						margin:20,
						// backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth :1
					},
					dataLabel:true,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true,
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:6,
						scrollShow:false,
						scrollAlign:'left',
						rotateLabel:true
					},
					yAxis: {
						//disabled:true
						gridType:'dash',
						splitNumber:4,
						min:10,
						max:180,
						format:(val)=>{return val.toFixed(0)}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'group',
							width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
						}
					},
				});
				
			},
			touchColumn(e){
				canvaColumn.scrollStart(e);
			},
			moveColumn(e) {
				canvaColumn.scroll(e);
			},
			touchEndColumn(e) {
				canvaColumn.scrollEnd(e);
				canvaColumn.touchLegend(e, {
					animation:false,
				});
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
		},
		computed:{
			salesTotal(){
				let total = 0;
				this.salesDatas.forEach(item =>{
					total += Number(item)
				})
				return total.toFixed(2) + '元'
			}
		}
	}
</script>

<style lang="less" scoped>
	.ana-ad{
		height: 100%;
		width: 100%;
		background-color: #FFFFFF;
		.c-bd{
			height: calc(100% - 100rpx);
			.selects{
				// height: 240rpx;
				// background-color: #ccc;
				padding:60rpx 30rpx 0;
				align-items: center;
				.tit{
					width: 100rpx;
					text-align: right;
				}
				.content{
					margin-left: 28rpx;
					flex: 1;
					justify-content: space-between;
					line-height: 60rpx;
					.st-time,.ed-time{
						text-align: center;
						height: 60rpx;
						width: 240rpx;
						border: 1px solid #C0C0C0;
						&.placeholder{
							color: #C0C0C0;
						}
					}
				}
			}
			/* canvsa宽高 */
			.charts {
				width: 750upx;
				height: 600upx;
				background-color: #FFFFFF;
			}
			.radarImg{
				width: 750upx;
				height: 600upx;
			}
			.total{
				font-size: 36rpx;
				text-align: center;
				margin: 30rpx;
			}
		}
	}
</style>
